<html lang="en"> <head> <script src="https://d3js.org/d3.v3.js"></script> </head> <body>
    <script type="text/javascript" charset="utf-8">
        // 布局, 可以理解成"制作常见图形的函数", 有了它制作各种相对复杂的图表就方便多了
        // 布局的作用是: 将不适合用于绘图的数据转换成了适合用于绘图的数据, 解释成: 数据转换
        // D3 总共提供了 12 个布局: 饼状图 (Pie) 、力导向图 (Force) 、弦图 (Chord) 、树状图 (Tree) 、
        // 集群图 (Cluster) 、捆图 (Bundle) 、打包图 (Pack) 、直方图 (Histogram) 、分区图 (Partition) 、
        // 堆栈图 (Stack) 、矩阵树图 (Treemap) 、层级图 (Hierarchy)
        var dataset = [30, 10, 43, 55, 13], width = 400, height = 400;
        var pie = d3.layout.pie(); // 返回函数
        var piedata = pie(dataset); // 查看转换后的数据
        console.log(piedata); // 每个对象都有变量起始角度 (startAngle) 和终止角度 (endAngle) , 还有原数据 (属性名称为 data)
        // 弧生成器, 可以生成弧的路径
        var outerRadius = 150; // 外半径
        var innerRadius = 0; // 内半径, 为 0 则中间没有空白
        var arc = d3.svg.arc() // 弧生成器
            .innerRadius(innerRadius) // 设置内半径
            .outerRadius(outerRadius); // 设置外半径
        // 弧生成器返回的结果赋值给 arc, 此时, arc 可以当做一个函数使用, 把 piedata 作为参数传入, 即可得到路径值
        // 先在 svg 里添加足够数量 (5个) 个分组元素 (g) , 每一个分组用于存放一段弧的相关元素
        var svg = d3.select("body").append("svg").attr("width", width).attr("height", height)
        var arcs = svg.selectAll("g")
            .data(piedata)
            .enter()
            .append("g")
            .attr("transform", "translate(" + (width / 2) + "," + (width / 2) + ")");
        // 接下来对每个 g 元素,  添加 path
        // 因为 arcs 是同时选择了 5 个 g 元素的选择集,  所以调用 append(“path”) 后,  每个 g 中都有 path。
        // 路径值的属性名称是 d,  调用弧生成器后返回的值赋值给它, 要注意, arc(d) 的参数 d 是被绑定的数据
        // 另外, color 是一个颜色比例尺, 它能根据传入的索引号获取相应的颜色值, 定义如下
        var color = d3.scale.category10(); // 有十种颜色的颜色比例尺
        arcs.append("path").attr("fill", function(d, i) { return color(i); })
            .attr("d", function(d) { return arc(d); }); // 调用弧生成器, 得到路径值
        // 然后在每一个弧线中心添加文本
        // arc.centroid(d) 能算出弧线的中心, 要注意, text() 里返回的是 d.data , 而不是 d
        // 因为被绑定的数据是对象, 里面有 d.startAngle、d.endAngle、d.data 等, 其中 d.data 才是转换前的整数的值。
        arcs.append("text")
            .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
            .attr("text-anchor", "middle")
            .text(function(d) { return d.data; });
    </script>

</body>

</html>
